<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="user-info">
				<uni-icons type="person-filled" size="30"></uni-icons>
				<text class="login-btn" @tap="handleLogin()">立即登录</text>
			</view>
		</view>
		<view class="empty-img">
			<image class="empty" src="/static/internet-empty.png" mode="aspectFill" lazy-load />
		</view>
	</view>
</template>

<script setup>
	import {
		showAuthModal
	} from '@/sheep/hooks/useModal';

	import {
		ref
	} from 'vue';

	const handleLogin = () => {
		showAuthModal()
	}
</script>

<style scoped>
	.container {
		background-color: #f5f5f5;
	}

	.header {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
		background-color: #fff;
		padding: 140rpx 20px 20px;
	}

	.user-info {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		border: 4rpx solid rgba(255, 255, 255, 0.3);
	}

	.login-btn {
		font-size: 32rpx;
		color: #555;
		font-weight: bold;
	}

	.empty-img {
		display: flex;
		justify-content: center;
		margin-top: 50rpx;
	}

	.empty {
		width: 80%;
	}
</style>